<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>普通用户</title>
	<link rel="stylesheet" href="${cxt }/css/iconfont.css" />
	<link rel="stylesheet" href="${cxt }/css/llp_consumer.css" />
	<script type="text/javascript" src="${cxt }/js/iconfont.js" ></script>
	<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
 	<script type="text/javascript">
		$(function(){
			$("#query").click(function(){
				$.ajax({
					url:"${cxt}/backstage/consumer1",
					success:function(data){
						console.log(data);
						$("#table").empty();
						for(var i=0;i<data.length;i++){
						$("#table").append('<tr>'+
								'					<td>'+data[i].user_name+'</td>'+
								'					<td>'+data[i].user_idcard+'</td>'+
								'					<td>'+data[i].user_telphone+'</td>'+
								'					<td>'+data[i].user_password+'</td>'+
								'					<td>'+data[i].user_paypassword+'</td>'+
								'					<td>'+data[i].user_email+'</td>'+
								'					<td>'+
								'						<input class="update" type="button" value="修 改" />'+
								'						<input class="delete" type="button" value="删 除" />'+
								'					</td>'+
								'				</tr>'
						)
						}
					},
					dataType:"json",
					data: {nametel:$("#nametel").val()}
				})
			})
			
			$("#insert").click(function(){
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#tianjia").css("display","block");
			})
			
			$("#queding").click(function(){
				$("#tianjia").css("display","none");
				$("#tjcg").css("display","block");
			})
			
			$("#quxiao").click(function(){
				$(".quxiao").css("display","none");
				$("#tianjia").css("display","none");
			})
			
			$("#queren").click(function(){
				var name = $("#name").val();
				$("input[name=name]").val(name);
				var idcard = $("#idcard").val();
				$("input[name=idcard]").val(idcard);
				var telphone = $("#telphone").val();
				$("input[name=telphone]").val(telphone);
				var password = $("#password").val();
				$("input[name=password]").val(password);
				var paypassword = $("#paypassword").val();
				$("input[name=paypassword]").val(paypassword);
				var email = $("#email").val();
				$("input[name=email]").val(email);
				$("#tjxx").submit();
				$(".quxiao").css("display","none");
				$("#tjcg").css("display","none");
			})
			
			$(document).on("click",".update",function(){
				var idcard1=$(this).parents("tr").find("td:eq(1)").text();
				$.ajax({
					url:"${cxt}/backstage/consumer2",
					type:"post",
					dataType:"json",
					data: {idcard1:idcard1},
					success:function(data){
						$("#name1").val(data.user_name);
						$("#idcard1").val(data.user_idcard);
						$("#telphone1").val(data.user_telphone);
						$("#password1").val(data.user_password);
						$("#paypassword1").val(data.user_paypassword);
						$("#email1").val(data.user_email);
					},
				})
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#xiugai").css("display","block");
			})
			
			$("#queding2").click(function(){
				$("#xiugai").css("display","none");
				$("#xgcg").css("display","block");
			})
			
			$("#quxiao2").click(function(){
				$(".quxiao").css("display","none");
				$("#xiugai").css("display","none");
			})
			
			$("#queren2").click(function(){
				var name1 = $("#name1").val();
				$("input[name=name1]").val(name1);
				var idcard1 = $("#idcard1").val();
				$("input[name=idcard1]").val(idcard1);
				var telphone1 = $("#telphone1").val();
				$("input[name=telphone1]").val(telphone1);
				var password1 = $("#password1").val();
				$("input[name=password1]").val(password1);
				var paypassword1 = $("#paypassword1").val();
				$("input[name=paypassword1]").val(paypassword1);
				var email1 = $("#email1").val();
				$("input[name=email1]").val(email1);
				$("#xgxx").submit();
				$(".quxiao").css("display","none");
				$("#xgcg").css("display","none");
			})
			
			$(document).on("click",".delete",function(){
				var idcard=$(this).parents("tr").find("td:eq(1)").text();
				$.ajax({
					data:{"idcard":idcard},
					url:"${cxt}/backstage/consumer2",
				})
				var $div=$("<div class='quxiao'></div>").width($(window).width()).height($(window).height()).css({position:'absolute',backgroundColor:'rgba(0,0,0,0.6)',top:'0px',left:'0px',zIndex:'4'});
				$("body").append($div);
				$("#qdsc").css("display","block");
			})
			
			$("#queding1").click(function(){
				$("#qdsc").css("display","none");
				$("#sccg").css("display","block");
			})
			
			$("#quxiao1").click(function(){
				$(".quxiao").css("display","none");
				$("#qdsc").css("display","none");
			})
			
			$("#queren1").click(function(){
				$("#scxx").submit();
				$(".quxiao").css("display","none");
				$("#sccg").css("display","none");
			})
		})
	</script>
	<style type="text/css">
		.tianjia{
			width:400px;
			height:380px;
			position:absolute;
			top:20px;
			left:200px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
		.tianjia .srk {
			height:20px;
			font-size:14px;
			text-indent:10px;
			border: 1px solid;
		}
		.qd{
	   		height: 30px;
	    	line-height: 30px;
			font-size: 12px;
			text-indent:0;
			width:80px;
		    color: #fff;
		    border: none;
		    border-radius: 2px;
		    background: #6ab0ff;
		}
		.tjcg{
			width:200px;
			height:120px;
			position:absolute;
			top:100px;
			left:300px;
			z-index:99;
			display:none;
			border:1px solid #dadada;
			background:#fff;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="contentdiv">
	<div class="top">
		<i class="iconfont icon-jibenshezhi"></i>
		<span> 普通用户</span>
	</div>
	<div class="center">
		<div class="centertop">
			<div>
				<input type="button" value="+添 加" id="insert"/>
			</div>
			<div class="find">
				<input class="findtext" type="text" id="nametel" placeholder="请输入用户名或者电话"/>
				<input type="button"  value="查 询" id="query"/>
				<a href="${cxt}/backstage/consumer"><input type="button"  value="查询全部"/></a>
			</div>
		</div>

		<div class="centerbutt">
			<table border="0" cellpadding="0" cellspacing="0" >
				<tr>
					<th>用户姓名</th>
					<th>身份证号码</th>
					<th>联系电话</th>
					<th>登录密码</th>
					<th>支付密码</th>
					<th>电子邮箱</th>
					<th>操作</th>
				</tr>
				<tbody id="table">
				<c:forEach items="${consumer}" var="consumer">
				<tr>
					<td>${consumer.user_name}</td>
					<td>${consumer.user_idcard}</td>
					<td>${consumer.user_telphone}</td>
					<td>${consumer.user_password}</td>
					<td>${consumer.user_paypassword}</td>
					<td>${consumer.user_email}</td>
					<td>
						<input class="update" type="button" value="修 改"/>
						<input class="delete" type="button" value="删 除"/>
					</td>
				</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
	</div>
	
	<form action="${cxt }/backstage/consumer1" method="post" id="tjxx">
	<div class="tianjia" id="tianjia">
		<br>
		<h3>添加用户</h3><br>
		用户姓名：<input class="srk" type="text" id="name">
				<input type="hidden" name="name"><br><br>
		身份证号码：<input class="srk" type="text" id="idcard">
				<input type="hidden" name="idcard"><br><br>
		联系电话：<input class="srk" type="text" id="telphone">
				<input type="hidden" name="telphone"><br><br>
		登录密码：<input class="srk" type="password" id="password">
				<input type="hidden" name="password"><br><br>
		支付密码：<input class="srk" type="password" id="paypassword">
				<input type="hidden" name="paypassword"><br><br>
		电子邮箱：<input class="srk" type="text" id="email"><br>
				<input type="hidden" name="email"><br>
		<input class="qd" type="button" value="确定" id="queding"/>
		<input class="qd" type="button" value="取消" id="quxiao"/>
	</div>
	<div class="tjcg" id="tjcg">
		<br>
		<h3>添加成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren"/>
	</div>
	</form>
	
	<form action="${cxt }/backstage/consumer3" method="post" id="xgxx">
	<div class="tianjia" id="xiugai">
		<br>
		<h3>修改用户</h3><br>
		用户姓名：<input class="srk" type="text" id="name1">
				<input type="hidden" name="name1"><br><br>
		身份证号码：<input class="srk" type="text" id="idcard1" readonly="readonly">
				<input type="hidden" name="idcard1"><br><br>
		联系电话：<input class="srk" type="text" id="telphone1">
				<input type="hidden" name="telphone1"><br><br>
		登录密码：<input class="srk" type="password" id="password1">
				<input type="hidden" name="password1"><br><br>
		支付密码：<input class="srk" type="password" id="paypassword1">
				<input type="hidden" name="paypassword1"><br><br>
		电子邮箱：<input class="srk" type="text" id="email1"><br>
				<input type="hidden" name="email1"><br>
		<input class="qd" type="button" value="确定" id="queding2"/>
		<input class="qd" type="button" value="取消" id="quxiao2"/>
	</div>
	<div class="tjcg" id="xgcg">
		<br>
		<h3>修改成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren2"/>
	</div>
	</form>
	
	<form action="${cxt }/backstage/consumer" method="post" id="scxx">
	<div class="tjcg" id="qdsc">
		<br>
		<h3>确定删除吗？</h3><br>
		<input class="qd" type="button" value="确定" id="queding1"/>
		<input class="qd" type="button" value="取消" id="quxiao1"/>
	</div>
	<div class="tjcg" id="sccg">
		<br>
		<h3>删除成功！</h3><br>
		<input class="qd" type="button" value="确认" id="queren1"/>
	</div>
	</form>
</body>
</html>